var ico = ico || [];
var col = "white";
var rad = $("slider");
rad.value;
var isIn = -1;

for ( var i = 0; i < 5; i++) {
	if (i == 0) {
		col = 'yellow';
	}
	if (i == 1) {
		col = 'white';
	}
	if (i == 2) {
		col = 'green';
	}
	if (i == 3) {
		col = 'black';
	}
	if (i == 4) {
		col = 'red';
	}
	ico[i] = paper.ellipse(i * 50 + 510, 25, 25, 25).attr({
		'stroke' : 'black',
		'fill' : col
	}).data("i", i);

	ico[i].click(function() {

		if (isIn == -1) {
			this.cx = width - 60;
			this.cy = height - 60;
			this.rx = rad.value;
			this.ry = rad.value;
			this.toFront();
			this.animate({
				cx : this.cx,
				cy : this.cy,
				rx : this.rx,
				ry : this.ry
			}, 1000, "<>");
			isIn = this.data("i");
		} else {
			ico[isIn].cx = isIn * 50 + 510;
			ico[isIn].cy = 25;
			ico[isIn].rx = 25;
			ico[isIn].ry = 25;
			ico[isIn].toFront();
			ico[isIn].animate({
				cx : ico[isIn].cx,
				cy : ico[isIn].cy,
				rx : ico[isIn].rx,
				ry : ico[isIn].ry
			}, 1000, "<>");

			this.cx = width - 60;
			this.cy = height - 60;
			this.rx = rad.value;
			this.ry = rad.value;
			this.toFront();
			this.animate({
				cx : this.cx,
				cy : this.cy,
				rx : this.rx,
				ry : this.ry
			}, 1000, "<>");
			isIn = this.data("i");
		}

		col = this.attr().fill;
		exampleCircle.attr({
			'fill' : col
		})

	})
}
var exampleSquare = paper.rect(width - 110, height - 110, 100, 100).attr({
	'fill' : 'white',
	"stroke-width" : 4
});
